<template>
    <div class="address-box">
        <nav-bar class="nav-bar">
            <template v-slot:default>
                地址管理
            </template>
        </nav-bar>

        <div v-show="list.length === 0" style="..." class="bbb">
            还没有地址信息，去添加吧！
        </div>
        <div class="address-item">
            <van-address-list
                v-model="chosenAddressId"
                :list="list"
                default-tag-text="默认"
                @add="onAdd"
                @edit="onEdit"
            />
        </div>
    </div>
</template>
<script>
import {reactive,toRefs,onMounted} from 'vue'
import NavBar from 'components/common/navbar/NavBar'
import {getAddressList} from 'network/address'
import {useRoute,useRouter} from 'vue-router'
export default {
    name:'Address',
    components:{
        NavBar
    },
    setup(){
        const route = useRoute()
        const router = useRouter()
        const state = reactive({
            chosenAddressId: '1',
            list: []
        })

        onMounted(()=>{
            // 获取地址列表
            getAddressList().then(res=>{
                // 在 res 里面有存进去的地址
                // 列表为空
                if(res.data.length == 0){
                    state.list = [];
                    return;
                }
                // res.data.map 里面的数据返回给list列表
                state.list = res.data.map(item=>{
                    return{
                        id:item.id,
                        name:item.name,
                        tel:item.phone,
                        address:`${item.province} ${item.city} ${item.county} ${item.address}`,
                        isDefault: !!item.is_default
                    }
                });
                
            })
        })

        const onAdd = () =>{
            router.push({ path: '/addressedit',query:{type: 'add'} })
        }

        const onEdit = (item) =>{
            router.push({ path: '/addressedit',query:{type: 'edit',addressId: item.id} })
        }
        
        // const select = (item) =>{
        //     router.push({ path: 'createorder',query:{addressId: item.id} })
        // }


        return{
            onEdit,
            onAdd,
            ...toRefs(state),
        }
    }
}
</script>
<style  lang="scss">
    .address-box{
        height: 300px;
        .van-radio_icon{
            display: none;
        }
        .address-item{
            margin-top: 45px;
            .van-button{
                background:aquamarine;
                border-color: white;
                color: black;
                position: absolute;
                bottom: 60px;
                left: 0;
            }
        }
    }
    .van-address-list_bottom{
        bottom: 100px !important;
    }
    .bbb{
        margin-top: 280px;
    }
</style>
